<template>
  <div>
    <div>
      <van-sticky>
        <el-card shadow="nover" class="mobile-card-search">
          <el-row :gutter="20">
            <el-col :span="20">
              <el-input
                placeholder="请输入提交人"
                prefix-icon="el-icon-search"
                v-model="queryParams.userName"
                @keyup.enter.native="handleQuery"
              ></el-input>
            </el-col>
            <el-col :span="4">
              <i
                style="color: #1989fa"
                class="el-icon-s-operation search-icon"
                @click="showPicker = true"
              ></i>

              <!-- 搜索弹窗 -->
              <van-popup
                v-model="showPicker"
                position="bottom"
                round
                style="height: 80%"
                close-icon="close"
                closeable
                class="modal-content"
              >
                <h3 style="text-align: center">筛选</h3>
                <van-form class="modal-body" ref="queryForm">
                  <searchable-picker
                    v-model="queryParams.queryValue"
                    :columns="dict.type.erp_weekly_query"
                    valueKey="value"
                    labelKey="label"
                    label="周报归属"
                    placeholder="请选择周报归属"
                  />
                  <van-field
                    readonly
                    clickable
                    name="calendar"
                    :value="queryParams.queryTime"
                    label="提交时间"
                    placeholder="点击选择日期"
                    @click="showCalendar = true"
                  />
                  <van-calendar
                    v-model="showCalendar"
                    @confirm="onConfirm"
                    type="range"
                    :min-date="new Date(2010, 0, 1)"
                    :max-date="new Date(2030, 0, 31)"
                  />
                </van-form>
                <div style="" class="modal-footer">
                  <van-button
                    type="default"
                    style="width: 40%; border-radius: 10px"
                    @click="resetQuery"
                    >重置</van-button
                  >
                  <van-button
                    type="info"
                    style="width: 40%; border-radius: 10px"
                    @click="handleQuery"
                    >查询</van-button
                  >
                </div>
              </van-popup>
              <!-- 搜索弹窗 -->
            </el-col>
          </el-row>
        </el-card>
      </van-sticky>
    </div>
    <div class="mobile-container">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="getList"
        finished-text="没有更多了...."
      >
        <div v-if="weeklyList.length > 0">
          <el-card
            class="mobile-card"
            shadow="hover"
            v-for="weekly in weeklyList"
            :key="weekly.weeklyId"
            @click.native="toWeeklyDetails(weekly.weeklyId)"
          >
            <div slot="header">
              <span class="mobile-card-titel"
                >{{ weekly.userName }} 发起的周报</span
              >
              <!-- <i class="el-icon-more" style="float: right"></i> -->
              <span style="float: right; color: gray; font-size: small;line-height: 23px;">{{
                weekly.submitTime
              }}</span>
            </div>
            <div style="color: gray; font-size: small">本周进度：</div>
            <div style="margin: 10px 0; font-size: medium">
              {{ weekly.weeklyContent }}
            </div>
          </el-card>
        </div>
        <van-empty description="暂无数据" v-if="weeklyList.length === 0 && !loading"/>
      </van-list>
      <el-button
        type="primary"
        icon="el-icon-edit"
        circle
        class="submitButton"
        @click="addWeekly"
      ></el-button>
    </div>
  </div>
</template>
<script>
import { listWeekly } from "@/api/erp/weekly";
export default {
  name: "weeklyListMobile",
  dicts: ["erp_weekly_query"],
  data() {
    return {
      showCalendar: false,
      showPicker: false,
      // 遮罩层
      loading: false,
      finished: false,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        queryValue: "0",
        userName: "",
        queryTime: "",
      },
      weeklyList: [],
    };
  },
  created() {
    this.queryParams.queryValue = this.$route.query.queryValue || "0";
  },
  methods: {
    addWeekly() {
      this.$router.push({
        path: "/erp/addWeekly",
      });
    },
    toWeeklyDetails(weeklyId) {
      this.$router.push({
        path: "/erp/weeklyDetails/" + weeklyId,
      });
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    // 日历回调
    onConfirm(date) {
      const [start, end] = date;
      this.showCalendar = false;
      this.queryParams.queryTime = `${this.formatDate(
        start
      )} - ${this.formatDate(end)}`;
    },
    init() {},
    /** 查询项目列表 */
    async getList() {
      this.loading = true;
      try {
        let obj = JSON.parse(JSON.stringify(this.queryParams));
        obj.queryTime = this.queryParams.queryTime?.split(" - ");
        let res = await listWeekly(obj);
        // 判断是否加载完所有数据
        if (this.weeklyList.length >= res.total) {
          this.finished = true;
        } else {
          this.weeklyList.push(...res.rows);
          this.queryParams.pageNum += 1;
        }
      } catch (error) {
        console.error("加载数据失败", error);
      } finally {
        this.loading = false;
      }
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.queryValue = "0";
      this.queryParams.userName = "";
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.weeklyList = [];
      this.queryParams.pageNum = 1;
      this.showPicker = false;
      this.getList();
    },
  },
};
</script>

<style scoped>
.modal-content {
  display: table;
  width: 100%;
  height: 100%;
}

.modal-body {
  display: table-row;
  height: 100%;
}

.modal-footer {
  display: table-row;
  text-align: center;
  padding: 16px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #e4dfdf;
}

.modal-footer button {
  width: 45%;
  border-radius: 10px;
}

.submitButton {
  position: fixed;
  top: 85%;
  left: 85%;
}
</style>